<!-- 
响应式布局
    概念：
        随着屏幕宽度变化，不同设备响应不同布局，自适应调整为PC端布局、iPad端布局、移动端布局；
        不需要单独制作不同端的页面，因为一个页面适应于不同端页面。

    原理：
        利用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备。

    屏幕档位：
        第一档  超小屏幕（手机，即：移动端）
                [min,768px)
        第二档  小屏设备（平板，即：iPad端）
                [768px,992px)
        第三档  中等屏幕（桌面显示器，即：小屏PC端）
                [992px,1200px)
        第四档  宽屏设备（大桌面显示器，即：大屏PC端）
                [1200px,max]
    平时的尺寸划分固定写死即可，如下：
        移动端      100%
        平板        750px
        普通PC端    970px
        大屏PC端    1170px
    为啥这些固定尺寸比各自档数的更小？
        因为真正去布局时，除了版心宽度外，还要给前后两边留出一些空白空间，这样的页面更好看！

    布局容器：
        响应式开发是需要一个布局容器的，一般使用一个父元素作为布局容器，结合子元素去实现变化效果；
        不同设备屏幕，通过媒体查询影响布局容器的宽度大小，
        进而改变里面子容器排列方式（多列到单列）和大小，
        最终实现不同屏幕下看到不同页面布局和样式变化。
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>响应式布局</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            height: 100px;
            margin: 0 auto;
            color: #fff;
            line-height: 100px;
            text-align: center;
        }
        /* 第一档：移动端 */
        @media screen and (max-width: 768px) {
            .container {
                width: 100%;
                background-color: red;
            }
        }
        /* 第二档：平板 */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
                background-color: orange;
            }
        }
        /* 第三档：小屏PC端 */
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
                background-color: blue;
            }
        }
        /* 第四档：大屏屏PC端 */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
                background-color: green;
            }
        }
    </style>
    <body>
        <div class="container">布局容器</div>
    </body>
</html>
